<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">编辑房间</block>
		</cu-custom>
		<form>
			<view>
				<view class="flex justify-between padding-sm bg-white align-center">
					<text>房间信息</text>
					<view class="text-xxl">
						<text @tap="saveFj" class="cuIcon-edit text-blue"></text>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">房间名</view>
					<input placeholder="请输入房间名" v-model="aroom.rname"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">面积㎡</view>
					<input type="number" placeholder="请输入面积" v-model="aroom.mj"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">容纳人数</view>
					<input type="number" placeholder="请输入人数" v-model="aroom.rnrs"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">瑜伽垫数</view>
					<input type="number" placeholder="请输入垫数" v-model="aroom.yjds"></input>
				</view>
				<view class="margin-top">
					<view class="cu-form-group">
						<view class="title">封面</view>
					</view>
					<cover-update v-if="aroom.cover" v-model="aroom.cover" :idKey="aroom.roomid" />
				</view>
				<view class="margin-top">
					<img-update v-if="aroom.imgs" :idKey="aroom.roomid" class="margin-top" v-model="aroom.imgs"
						:size="4" />
				</view>
			</view>

			<view class="margin-top bg-white padding">
				<view class="flex justify-between margin-bottom align-center">
					<text>门禁信息</text>
					<view class="text-xxl">
						<text @tap="addmj" class="cuIcon-roundaddfill text-blue"></text>
					</view>
				</view>
				<view>
					<view class="margin-top" v-for="(mj,index) in mjs" :key="index">
						<view class="cu-card bg-white shadow">
							<view class="cu-form-group flex justify-between align-center">
								<view class="flex justify-end align-center">
									<view  class="flex align-stretch">
										<text class="text-xl"><text
												:class="!mj.flg ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"
												class="text-blue"></text></text>
										<text>进门</text>
									</view>

									<!-- <view @tap="mjs[index].flg = !mjs[index].flg;"
										class="flex  justify-start align-stretch margin-left">
										<text class="text-xl"><text
												:class="mj.flg ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"
												class="text-blue"></text></text>
										<text>出门</text>
									</view> -->


								</view>

								<view class="text-xl">
									<config-mj v-if="mjs[index].config" @close="mjs[index].config = false; $forceUpdate();" :mj="mj"></config-mj>
									<text @tap="mjs[index].config = true; $forceUpdate();" class="cuIcon-settingsfill text-blue"></text>
									<text @tap="saveMj(mj)" class="cuIcon-edit text-blue margin-left"></text>
									<text @tap="rmmj(index)" class="cuIcon-deletefill text-red margin-left"></text>
								</view>

							</view>
							<view class="cu-form-group">
								<view class="title">型号：</view>
								<input class="solid" type="number" placeholder="请输入型号" v-model="mj.modelnumber"></input>
							</view>
							<view class="cu-form-group">
								<view class="title">序列号：</view>
								<input class="solid" type="number" placeholder="请输入序列号" v-model="mj.sn"></input>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="margin-top bg-white padding">
				<view class="flex justify-between align-center">
					<text>经营模式</text>
					<view class="">
						<text class="text-xl">
							<text @tap="setJyms('SD')" :class="aroom.jyms == 'SD' ? 'cuIcon-squarecheckfill text-blue' : 'cuIcon-square'" class="margin-right-sm">
								<text class="text-df">时段经营</text>
							</text>
							
							<!-- <text @tap="setJyms('DL')" :class="aroom.jyms == 'DL' ? 'cuIcon-squarecheckfill text-blue' : 'cuIcon-square'" class="margin-right-sm">
								<text class="text-df">包日经营</text>
							</text> -->
							
							<!-- <text @tap="setJyms('MT')" :class="aroom.jyms == 'MT' ? 'cuIcon-squarecheckfill text-blue' : 'cuIcon-square'" class="margin-right-sm">
								<text class="text-df">包月经营</text>
							</text> -->
						</text>
					</view>
				</view>
			</view>
			
			<view v-show="aroom.jyms == 'MT'" class="margin-top bg-white padding">
				<view class="flex justify-between align-center margin-bottom">
					<text>包月价格</text>
					<view class="text-xxl">
						<text @tap="saveMp" class="cuIcon-edit text-blue"></text>
						<!-- <text @tap="addmlp" class="cuIcon-roundaddfill text-blue"></text> -->
					</view>
				</view>
				<view>
					<view v-for="(mp, index) in aroommonthlyprices" :key="index" class="margin-top-xs">
						<view class="flex justify-between align-center solid padding-sm ">
							<view class="flex justify-end align-center w-40">
								月价：<input class="solid w-50" v-model="mp.price" />分
							</view>
						</view>
					</view>
			
				</view>
			</view>
			
			<view v-show="aroom.jyms == 'DL'" class="margin-top bg-white padding">
				<view class="flex justify-between align-center margin-bottom">
					<text>包日价格</text>
					<view class="text-xxl">
						<text @tap="saveDp" class="cuIcon-edit text-blue"></text>
						<!-- <text @tap="addhlp" class="cuIcon-roundaddfill text-blue"></text> -->
					</view>
				</view>
				<view>
					<view v-for="(dp, index) in aroomdailyprices" :key="index" class="margin-top-xs">
						<view class="flex justify-between align-center solid padding-sm ">
							<view class="flex justify-end align-center w-40">
								日价：<input class="solid w-50" v-model="dp.price" />分
							</view>
						</view>
					</view>
			
				</view>
			</view>

			<view v-show="aroom.jyms == 'SD'" class="margin-top bg-white padding">
				<view class="flex justify-between align-center margin-bottom">
					<text>营业时段</text>
					<view class="text-xxl">
						<text @tap="saveHp" class="cuIcon-edit text-blue"></text>
						<text @tap="addhlp" class="cuIcon-roundaddfill text-blue"></text>
					</view>
				</view>
				<view>
					<view v-for="(hlp, index) in aroomhourlyprices" :key="index" class="margin-top-xs">
						<view class="flex justify-between align-center solid padding-sm ">
							<view @tap="aroomhourlyprices[index].stu = !aroomhourlyprices[index].stu;"
								class="flex  justify-start align-stretch margin-left">
								<text class="text-xl"><text
										:class="hlp.stu ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"
										class="text-blue"></text></text>
							</view>
							<picker class="w-20" mode="time" :value="hlp.st" start="00:00" end="23:59" @change="timeChange($event, hlp, 'st')">
								<view style="height: 1.7rem;" class="solid flex justify-center align-center">{{hlp.st}}</view>
							</picker>
							<picker  class="w-20" mode="time" :value="hlp.et" start="00:00" end="23:59" @change="timeChange($event, hlp, 'et')">
								<view style="height: 1.7rem;" class="solid flex justify-center align-center">{{hlp.et}}</view>
							</picker>
							<view class="flex justify-end align-center w-40">
								单价：<input class="solid w-50" v-model="hlp.price" />分
							</view>
							<view class="text-xl">
								<text @tap="rmhlp(index)" class="cuIcon-deletefill text-red margin-left"></text>
							</view>
						</view>
					</view>

				</view>
			</view>
			
			
			
			
			<view v-if="aroompjs.length > 0" class="margin-top">
				<view class="cu-bar bg-white text-blue solid-bottom">
					<view class="action">
						<text class="cuIcon-titles  "></text> 评价信息
					</view>
					<view @tap="gotoPjList">
						<text class=" ">更多</text>
						<text class="  ">
							<text class="iconfont icon-arrowright"></text>
						</text>
					</view>
				</view>
				<view class=" bg-white">
					<view class="padding" v-for="(pj,index) in aroompjs" :key="index">
						<view class="shadow bg-white flex justify-start">
							<view class="cu-avatar round xl margin-xs" :style="{backgroundImage: `url(${pj.jcover})`}"></view>
							<view class="flex flex-direction justify-start">
								<view class="padding-xs flex justify-between align-center">
									<text>{{pj.jname}}</text>
									<uni-rate v-model="pj.count"></uni-rate>
								</view>
								<view class="padding-xs">{{pj.content}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				roomid: "",
				aroom: {},
				aroomhourlyprices: [],
				aroommonthlyprices: [],
				aroomdailyprices: [],
				mjs: [],
				aroompjs: [],
				temps: []
			};
		},
		onLoad: function(option) {
			
			this.aroom.roomid = option.roomid;
			this.loadroom();
		},

		methods: {
			setJyms: function(ms) {
				this.aroom.jyms = ms;
			},
			saveFj: function() {
				this.api("/room/info/put").send({
					aroom: this.aroom
				}).then(data => {
					this.message.info("修改房间信息成功");
				});
			},
			loadroom: function() {
				this.api("/room/info/get").send({
					roomid: this.aroom.roomid
				}).then(data => {
					this.aroom = data.room;
					this.mjs = data.amenjins;
					this.aroomhourlyprices = data.aroomhourlyprices;
					this.aroomdailyprices = data.aroomdailyprices;
					this.aroommonthlyprices = data.aroommonthlyprices;
					this.aroompjs = data.aroompjs;
				});
			},

			gotoPjList: function() {
				uni.navigateTo({
					url: '/pages/cdz/fj/pjlist?roomid='+this.room.roomid
				});
			},
			addmj: function() {
				this.mjs.push({
					mjid: "",
					flg: false,
					modelmumber: "F014",
					uid: "",
					ukey: this.aroom.roomid,
					sn: "",
					statu: true,
					dflg: false,
					roomid: this.aroom.roomid,
					storeid: this.aroom.storeid,
				});
			},
			rmmj: function(index) {
				if (this.mjs[index].mjid) {
					this.api("/mj/info/del").send({
						mjid: this.mjs[index].mjid
					}).then(data => {
						this.message.info("删除成功");
						this.mjs.splice(index, 1);
					});
				} else {
					this.mjs.splice(index, 1);
				}
			},
			saveMj: function(mj) {
				if (mj.mjid) {
					this.api("/mj/info/put").send(mj).then(data => {
						this.message.info("修改门禁成功");
					});
				} else {
					this.api("/mj/info").send(mj).then(data => {
						this.message.info("新增门禁成功");
					});
				}
			},

			saveHp: function() {
				this.api("/room/info/put").send({
					aroomhourlyprices: this.aroomhourlyprices
				}).then(() => {
					this.message.info("修改价格时段成功");
				});
			},
			
			saveDp: function() {
				this.api("/room/info/put").send({
					aroomdailyprices: this.aroomdailyprices
				}).then(() => {
					this.message.info("修改包日价格成功");
				});
			},
			
			saveMp: function() {
				this.api("/room/info/put").send({
					aroommonthlyprices: this.aroommonthlyprices
				}).then(() => {
					this.message.info("修改包月价格成功");
				});
			},


			mjFlgChange: function(e, mj) {
				mj.flg = e.detail.value;
				console.log(this.mjs);
			},
			addhlp: function() {
				this.aroomhourlyprices.push({
					price: 50,
					st: "00:00",
					et: "00:00",
					roomid: this.aroom.roomid,
					stu: true
				});
			},
			rmhlp: function(index) {
				this.aroomhourlyprices.splice(index, 1);
			},

			timeChange: function(e, hpl, tag) {
				hpl[tag] = e.detail.value;
			},
		}
	}
</script>

<style>
</style>